 @import "variables";
 recommend {
   height: 100%;
   .container {
     //  overflow: hidden;
      height: 100%;
     -webkit-overflow-scrolling: auto;
     background: #000;
   }
   .header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 11;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: pxTorem(90);
     padding: pxTorem(30);
     background: #000;
     .title {
       flex: 1;
       padding-right: pxTorem(21);
       text-align: center;
       @include font-dpr(32px);
       color: #fff;
     }
     .back-icon {
       display: inline-block;
       @include icon(21, 40, '/assets/icon/fanhui_video.png')
     }
   }
   .grid-list {
     overflow: hidden;
     width: 100%; //  height: 100%;
     padding-top: pxTorem(120);
     -webkit-overflow-scrolling: auto;
     background: #000;
     
     .grid-item {
       float: left;
       position: relative;
       width: 50%;
       height: pxTorem(268);
       margin-bottom: pxTorem(20);
       text-align: center;
       background: #000;
       &:nth-child(odd) {
         padding-left: pxTorem(20);
         padding-right: pxTorem(5);
         h3 {
           margin-right: pxTorem(5);
           left: pxTorem(20);
         }
       }
       &:nth-child(even) {
         padding-right: pxTorem(20);
         padding-left: pxTorem(5);
         h3 {
           left: 0;
           margin-right: pxTorem(20);
           margin-left: pxTorem(5);
         }
       }
       img {
         width: 100%;
         height: 100%;
       }
       h3 {
         position: absolute;
         bottom: 0;
         right: 0;
         text-align: initial;
         background: rgba(0, 0, 0, .7); // background: linear-gradient(#fff, #000);
         height: pxTorem(66);
         padding: 0 pxTorem(20);
         line-height: pxTorem(66);
         @include font-dpr(28px);
         color: #fff;
       }
       img {
         height: 100%;
       }
     }
   }
 }
